*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--transition: 0.25s;
--spark: 1.8s;
--hue: 245;
}
body {
--active: 0;
background: hsl(var(--hue) calc(var(--active) * 97%) 6%);
display: grid;
place-items: center;
min-height: 100vh;
font-family: system-ui, sans-serif;
transition: background var(--transition);
overflow: hidden;
}
button {
--cut: 0.1em;
--active: 0;
--bg:
radial-gradient(120% 120% at 126% 126%,
hsl(var(--hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
transparent 50%) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
radial-gradient(120% 120% at 120% 120%,
hsl(var(--hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
transparent 70%) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
hsl(var(--hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
background: var(--bg);
font-size: 2rem;
font-weight: 500;
border: 0;
cursor: pointer;
padding: 0.9em 1.3em;
display: flex;
align-items: center;
gap: 0.25em;
white-space: nowrap;
border-radius: 2rem;
position: relative;
box-shadow:
0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(var(--hue) 97% 61% / 0.5),
0 0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
0 -0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
scale: calc(1 + (var(--active) * 0.1));
transform-style: preserve-3d;
perspective: 100vmin;
overflow: hidden;
}
button:active {
scale: 1;
}
.star {
height: calc(var(--size) * 1px);
aspect-ratio: 1;
background: white;
border-radius: 50%;
/* filter: blur(4px);*/
position: absolute;
opacity: var(--alpha);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));
animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
}
@keyframes orbit {
to {
transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
}
}
.galaxy {
position: absolute;
width: 100%;
aspect-ratio: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
overflow: hidden;
opacity: var(--active);
transition: opacity var(--transition);
/*transform-style: preserve-3d;
perspective: 100vmin;*/
/* opacity: 0.25;*/
}
.galaxy__ring {
height: 200%;
width: 200%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
transform-style: preserve-3d;
/* background: red;*/
}
.galaxy__container {
position: absolute;
inset: 0;
opacity: var(--active);
transition: opacity var(--transition);
mask: radial-gradient(white, transparent);
}
.star--static {
animation: none;
top: 50%;
left: 50%;
transform: translate(0, 0);
max-height: 4px;
filter: brightness(4);
opacity: 0.9;
animation:
move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
}
button:hover .star--static {
animation-play-state: paused;
}
@keyframes move-x {
0% {
translate: -100px 0;
}
100% {
translate: 100px 0;
}
}
@keyframes move-y {
0% {
transform: translate(0, -50px);
}
100% {
transform: translate(0, 50px);
}
}
.spark {
position: absolute;
inset: 0;
border-radius: 2rem;
rotate: 0deg;
overflow: hidden;
mask: linear-gradient(white, transparent 50%);
animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}
@keyframes flip {
to {
rotate: 360deg;
}
}
.spark:before {
content: "";
position: absolute;
width: 200%;
aspect-ratio: 1;
top: 0%;
left: 50%;
z-index: -1;
translate: -50% -15%;
rotate: 0;
transform: rotate(-90deg);
opacity: calc((var(--active)) + 0.4);
background: conic-gradient(from 0deg,
transparent 0 340deg,
white 360deg);
transition: opacity var(--transition);
animation: rotate var(--spark) linear infinite both;
}
.spark:after {
content: "";
position: absolute;
inset: var(--cut);
border-radius: 2rem;
}
.backdrop {
position: absolute;
inset: var(--cut);
background: var(--bg);
border-radius: 2rem;
transition: background var(--transition);
}
@keyframes rotate {
to {
transform: rotate(90deg);
}
}
@supports(selector(:has(:is(+ *)))) {
body:has(button:is(:hover, :focus-visible)) {
--active: 1;
--play-state: running;
}
.bodydrop {
display: none;
}
}
button:is(:hover, :focus-visible)~ :is(.bodydrop, .particle-pen) {
--active: 1;
--play-state: running;
}
.bodydrop {
background: hsl(260 calc(var(--active) * 97%) 6%);
position: fixed;
inset: 0;
z-index: -1
}
button:is(:hover, :focus-visible) {
--active: 1;
--play-state: running;
}
.galaxy-button {
position: relative;
}
@keyframes float-out {
to {
rotate: 360deg;
}
}
.text {
translate: 2% -6%;
letter-spacing: 0.01ch;
/*background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
-webkit-background-clip: text;*/
color: hsl(0 0% calc(60% + (var(--active) * 26%)));
}
button svg {
inline-size: 1.25em;
translate: -25% -5%;
}